﻿@section body {
<div class="layui-fluid">
    <div class="layui-row layui-col-space5">
        @*左边表格*@
        <div class="layui-col-md10">
            <div class="layui-card">
                <div>
                    <div class="layui-card-body">
                        <div class="layui-form">
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" id="btnSave">查询</button>
                                    <button type="button" class="layui-btn" id="btnClear">清空耗时记录</button>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">SqlCount:</label>
                                <div class="layui-input-block">
                                    <textarea id="txtsqlcount" placeholder="请输入SqlCount语句" class="layui-textarea" style="height:150px;"></textarea>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">Sql语句:</label>
                                <div class="layui-input-block">
                                    <textarea id="txtsql" placeholder="请输入Sql语句" class="layui-textarea" style="height:200px;"></textarea>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <div id="test1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @*右边表格*@
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-body">
                     <div id="div1">耗时(毫秒)</div>
                </div>
            </div>
        </div>
    </div>
</div>

}
@section script {
    
    <script>
        layui.config({
            base: '../layuiadmin/' , version: "@(@StaticConfig.StaticConfigVersion)"
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index'], function () {
            var $ = layui.$
                , laypage = layui.laypage
                , form = layui.form
                , admin = layui.admin
            $('#btnClear').click(function () {
                $('#div1').html('');
            });
            $('#btnSave').click(function () {

                if ($('#txtsqlcount').val() == '') {
                    layer.msg('请输入SqlCount语句！', {
                        offset: 't',
                        anim: 6
                    });
                    return;
                }
                //请求登入接口
                admin.req({
                    url: 'DebugSqlResult' //实际使用请改成服务端真实接口
                    , data: { sql: $('#txtsqlcount').val(), __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value }
                    , type: "post"
                    , dataType: "json"
                    //,contentType: 'application/json'
                    , done: function (res) {
                        if (res.codeIndex == 1) {
                            $('#div1').append('<p>' + res.msg + '</p>');
                            laypage.render({
                                elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
                                , count: parseInt(res.data) //数据总数，从服务端得到
                                , layout: ['prev', 'page', 'next', 'limit', 'count']
                                , jump: function (obj, first) {
                                    //obj包含了当前分页的所有参数，比如：
                                    //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                    //console.log(obj.limit); //得到每页显示的条
                                    //首次不执行
                                    if (!first) {
                                        //do something
                                        if ($('#txtsql').val() == '') {
                                            layer.msg('请输入Sql语句！', {
                                                offset: 't',
                                                anim: 6
                                            });
                                            return;
                                        }
                                        //请求登入接口
                                        admin.req({
                                            url: 'DebugSqlResultTime' //实际使用请改成服务端真实接口
                                            , data: { sql: $('#txtsql').val(), index: obj.curr, page: obj.limit, __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value }
                                            , type: "post"
                                            , dataType: "json"
                                            //,contentType: 'application/json'
                                            , done: function (res) {
                                                if (res.codeIndex == 1) {
                                                    $('#div1').append('<p>' + res.msg + '</p>');
                                                } else {
                                                    layer.msg(res.msg, {
                                                        offset: 't',
                                                        anim: 6
                                                    });
                                                }
                                            }
                                        });
                                    }
                                }
                            });
                        } else {
                            layer.msg(res.msg, {
                                offset: 't',
                                anim: 6
                            });
                        }
                    }
                });
            });
        });
    </script>
}
